<template>
  <div class="assistant" @click="dialogVisible = true">
    <img src="../assets/assistant.png" alt="颐小护" class="bounce" />
    <el-dialog
        v-model="dialogVisible"
        title="颐小护助手"
        width="800px"
        top="10vh"
        append-to-body
    >
      <component :is="StreamComponent" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue'

// 异步加载 Stream.vue
const StreamComponent = defineAsyncComponent(() => import('@/views/Stream.vue'))
const dialogVisible = ref(false)
</script>

<style scoped>
.assistant {
  position: fixed;
  bottom: 60px;
  right: 30px;
  cursor: pointer;
  z-index: 9999;
}
.bounce {
  width: 70px;
  animation: bounce 1.5s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
::v-deep(.el-dialog) {
  max-height: 80vh;
}
::v-deep(.el-dialog__body) {
  overflow-y: auto;
  max-height: 60vh;
}
</style>
